<template>
    <!-- 风险清单 -->
    <div class="system4 accidentCase">
        <div class="bscroll">
            <ul class="header">
                <li @click="go1">法规标准</li>
                <li @click="go2">规章制度</li>
                <li @click="go3">操作规程</li>
                <li class="currentLi">事故案例</li>
            </ul>
            <vue-better-scroll class="wrapper"
                               ref="scroll0"
                               :scrollbar="scrollbarObj"
                               :pullDownRefresh="pullDownRefreshObj"
                               :pullUpLoad="pullUpLoadObj"
                               :startY="parseInt(startY)"
                               @pullingDown="onPullingDown"
                               @pullingUp="onPullingUp">
                <div class="bscroll-container">
                    <div class="system4Div">
                        <div class="system4Div_top">
                            <ul class="ul11">
                                <li class="clearfix">
                                    <span class="spa">标题/全文</span>
                                    <input class="tit_inp"
                                           type="text"
                                           placeholder="请输入关键字"
                                           v-model="parmas.data.FileName">
                                    <!-- <em @click="$router.push('./search1')" v-if="!name1">默认本单位 <x-icon type="ios-arrow-right" size="20"></x-icon></em>
                                    <em  @click="$router.push({path:'./search1'})" v-else>{{name1}} <x-icon type="ios-arrow-right" size="20"></x-icon></em> -->
                                </li>
                                <li class="clearfix">
                                    <span class="spa">事故等级</span>
                                    <!-- <em @click="$router.push({path:'./chooseLev',query:{radios:name2}})">{{name2 ? name2:'全部'}}
                                        <x-icon type="ios-arrow-right"
                                                size="20"></x-icon>
                                    </em> -->
                                    <group>
                                        <popup-picker :data="arr1"
                                                      placeholder='默认全部'
                                                      @on-change="changeName2"
                                                      v-model="name2"></popup-picker>
                                    </group>
                                    <!-- <em  @click="$router.push({path:'./chooseLev',query:{radios:name2}})" v-else>{{name2}} <x-icon type="ios-arrow-right" size="20"></x-icon></em> -->
                                </li>
                                <li class="clearfix">
                                    <span class="spa">开始时间</span>
                                    <datetime v-model="parmas.data.StartDate"
                                              placeholder="请选择"
                                              @on-change="change1"
                                              format="YYYY-MM-DD"></datetime>
                                    <x-icon type="ios-arrow-right"
                                            size="20"
                                            v-if="!parmas.data.Date"></x-icon>
                                </li>
                                <li class="clearfix">
                                    <span class="spa">结束时间</span>
                                    <datetime v-model="parmas.data.EndDate"
                                              placeholder="请选择"
                                              @on-change="change2"
                                              format="YYYY-MM-DD"></datetime>
                                    <x-icon type="ios-arrow-right"
                                            size="20"
                                            v-if="!parmas.data.Date"></x-icon>
                                </li>
                            </ul>
                            <div class="queryBtn"
                                 @click="query">查询</div>
                        </div>
                    </div>
                    <noData v-if="!listArr.length"></noData>
                    <ul class="system4Main">
                        <li v-for="(item,index) in listArr"
                            :key="index"
                            @click="$router.push({path:'./system4Destail',query:{id:item.ID}})">
                            <h5>{{item.CaseName}}</h5>
                            <p>事故单位: {{item.CaseDepart}}
                                <x-icon type="ios-arrow-right"
                                        size="20"></x-icon>
                            </p>
                            <p>
                                <span>事故等级: {{item.AccidentLevel}}</span>
                                <em>事故时间: {{item.ProduceDate}}</em>
                            </p>
                        </li>
                    </ul>
                </div>
            </vue-better-scroll>
        </div>
        <myMenu @clickBack="back"
                backPath='/Index/newEdit'></myMenu>
    </div>
</template>
<script>
import { Datetime, Radio } from 'vux'
import VueBetterScroll from 'vue2-better-scroll'
import myMenu from '@/commonComponents/menu'
export default {
    components: {
        Radio,
        myMenu,
        Datetime,
        VueBetterScroll
    },
    data () {
        return {
            name1: '',
            name2: ['全部'],
            name3: '',
            parmas: {
                'allowPaging': true,
                'business': 'GetAccidentCaseList',
                'data': {
                    'EndDate': '',
                    'FileName': '',
                    'StartDate': '',
                    'Type': '',
                    'organizecode': ''
                },
                'method': null,
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': 'AF0EC33214DA0CE97E2067CC1C4E3A6E',
                'userId': ''
            },
            listArr: [],
            nodata: true,
            // dropDown: false
            // 这个配置可以开启滚动条，默认为 false。当设置为 true 或者是一个 Object 的时候，都会开启滚动条，默认是会 fade 的
            scrollbarObj: {
                fade: true
            },
            // 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
            pullDownRefreshObj: false,
            // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
            pullUpLoadObj: {
                threshold: 0,
                txt: {
                    more: '加载更多',
                    noMore: '没有更多数据了'
                }
            },
            startY: 0, // 纵轴方向初始化位置
            listCount: 0, // 当前列表条数
            listAllCount: 0, // 总条数
            arr1: [['全部', '轻伤事故', '重伤事故', '一般事故', '较大事故', '重大事故', '特别重大事故']]
        }
    },
    created () {
        var token = JSON.parse(window.localStorage.getItem('userInfo'))
        this.parmas.userId = token.userid
        // if (window.sessionStorage.getItem('name1')) {
        //     this.name1 = window.sessionStorage.getItem('name1')
        //     this.parmas.data.departId = window.sessionStorage.getItem('departId')
        // } else {
        this.name1 = token.deptname
        this.parmas.data.departId = token.deptid
        // }
        // if (window.sessionStorage.getItem('name2')) {
        //     this.name2 = window.sessionStorage.getItem('name2')
        //     this.parmas.data.Type = window.sessionStorage.getItem('name2')
        // }
        // if (JSON.parse(window.sessionStorage.getItem('name3'))) {
        //     var name = JSON.parse(window.sessionStorage.getItem('name3'))
        //     var name3 = ''
        //     for (var k of name) {
        //         name3 += k + ','
        //         // console.log(name3,1990)
        //     }
        //     this.name3 = name3.substring(0, name3.length - 1)
        //     this.parmas.data.AccidentType = this.name3
        // }
        // 获取时间缓存信息
        // if (window.sessionStorage.getItem('time1')) {
        //     this.parmas.data.StartDate = window.sessionStorage.getItem('time1')
        // }
        // if (window.sessionStorage.getItem('time2')) {
        //     this.parmas.data.EndDate = window.sessionStorage.getItem('time2')
        // }
        this.$vux.loading.show({
            text: '加载中...'
        })
        this.parmas.userId = token.userid
        this.onPullingDown()
    },
    methods: {
        // 获取列表数据
        getData () {
            return this.$axiosAjax.getConfigJson(this.parmas)
        },
        // 点击查询
        query () {
            this.onPullingDown()
        },
        // 模拟下拉刷新
        onPullingDown () {
            let that = this
            this.getData().then(res => {
                if (res.data.code === 0) {
                    that.listArr = res.data.data
                    that.listCount = that.listArr.length
                    that.listAllCount = res.data.count
                    that.$vux.loading.hide()
                }
                if (that.listCount < that.listAllCount) {
                    that.$refs.scroll0.forceUpdate(true)
                } else {
                    that.$refs.scroll0.forceUpdate(false)
                }
            }).finally(() => {
                that.$vux.loading.hide()
            })
        },
        // 模拟上拉 加载更多数据
        onPullingUp () {
            let that = this
            this.parmas.pageIndex++
            this.getData().then(res => {
                if (res.data.code === 0) {
                    that.listArr = that.listArr.concat(res.data.data)
                    that.listCount = that.listArr.length
                    that.$vux.loading.hide()
                }
                if (that.listCount < that.listAllCount) {
                    that.$refs.scroll0.forceUpdate(true)
                } else {
                    that.$refs.scroll0.forceUpdate(false)
                }
            }).finally(() => {
                that.$vux.loading.hide()
            })
        },
        back () {
            window.sessionStorage.removeItem('name1')
            window.sessionStorage.removeItem('departId')
            window.sessionStorage.removeItem('name2')
            window.sessionStorage.removeItem('name3')
        },
        go1 () {
            window.sessionStorage.clear()
            this.$router.push('./system')
        },
        go2 () {
            window.sessionStorage.clear()
            this.$router.push('./system2')
        },
        go3 () {
            window.sessionStorage.clear()
            this.$router.push('./system3')
        },
        // 缓存时间信息
        change1 (value) {
            window.sessionStorage.setItem('time1', value)
        },
        change2 (value) {
            window.sessionStorage.setItem('time2', value)
        },
        dataArr () {
            this.$axiosAjax.getConfigJson(this.parmas).then((res) => {
                if (res.status == 200) {
                    this.listArr = res.data.data
                    this.total = res.data.count
                    if (res.data.data != null && res.data.data.length > 0) {
                        this.nodata = true
                    } else {
                        this.nodata = false
                    }
                }
            }
            )
        },
        changeName2 (val) {
            this.parmas.data.Type = val[0] === '全部' ? '' : val[0]
        }
    }
}
</script>
<style lang="less" scope>
.accidentCase {
    font-size: 14px;
}
.system4 {
    width: 100%;
    height: 100%;
    background-color: #fff;
    .header {
        width: 100%;
        height: 60px;
        padding-left: 20px;
        li {
            width: 64px;
            line-height: 60px;
            height: 60px;
            float: left;
            margin-right: 24px;
            color: #999;
            font-size: 16px;
        }
        .currentLi {
            width: 64px;
            line-height: 60px;
            height: 60px;
            float: left;
            margin-right: 24px;
            color: #2269ff;
            font-size: 16px;
            border-bottom: 4px solid #2269ff;
        }
    }
    .system4Div {
        width: 100%;
        background-color: #fff;
        border-bottom: 10px solid #f0eff5;
        border-top: 10px solid #f0eff5;
        .system4Div_top {
            width: 100%;
            padding-bottom: 1px;
            background-color: #fff;
            .ul11 {
                margin-left: 20px;
                li {
                    padding: 10px 20px 10px 0;
                    border-bottom: 1px solid #eee;
                    width: 100%;
                    height: 50px;
                    line-height: 30px;
                    position: relative;
                    display: flex;
                    .vux-x-icon {
                        fill: #999;
                        float: right;
                        position: absolute;
                        width: 20px;
                        height: 20px;
                        top: 14px;
                        right: 14px;
                    }
                    .spa {
                        float: left;
                        height: 30px;
                        line-height: 30px;
                        width: 140px;
                        font-size: 14px !important;
                        line-height: 30px !important;
                        color: #333;
                    }
                    em {
                        float: right;
                        color: #999;
                        width: 200px;
                        height: 30px;
                        font-size: 14px;
                        line-height: 30px;
                        text-align: right;
                        margin-right: 15px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        div {
                            float: right;
                            margin-left: 20px;
                            width: 26%;
                            position: relative;
                            text-align: right;
                            color: #999;
                            input {
                                width: 16px;
                                height: 16px;
                                position: absolute;
                                top: 6px;
                                left: 10px;
                                text-align: center;
                            }
                        }
                    }
                    .weui-cell {
                        // display: none;
                        padding: 0;
                    }
                    .weui-cell_access {
                        width: 220px;
                    }
                    .vux-cell-value {
                        float: right;
                        font-size: 14px;
                        color: #999;
                        padding-right: 10px;
                    }
                    .weui-cells:after {
                        border-bottom: none;
                    }
                    .weui-cells:before {
                        border-top: none;
                    }
                    .vux-no-group-title {
                        display: flex;
                        align-items: center;
                        margin-top: 0;
                        height: 30px;
                    }
                    .weui-cell_access .weui-cell__ft::after {
                        height: 8px;
                        width: 8px;
                    }
                }
                .tit_inp {
                    display: block;
                    text-align: right;
                    float: right;
                    width: 300px;
                    color: #999;
                    font-size: 14px;
                }
                .vux-datetime-value {
                    text-align: right;
                    padding-right: 0;
                }
                .vux-cell-placeholder {
                    margin-right: 15px;
                    color: #999 !important;
                }
                .vux-cell-value {
                    // margin-right: 15px;
                    color: #999 !important;
                }
            }
            .queryBtn {
                height: 40px;
                line-height: 40px;
                left: 40px;
                margin: 25px auto;
                text-align: center;
                width: 200px;
                border-radius: 25px;
                background-color: #2269ff;
                letter-spacing: 4px;
                color: #fff;
            }
        }
    }
    .system4Main {
        padding: 0 20px;
        li {
            width: 100%;
            padding: 15px 0;
            border-bottom: 1px solid #f0eff5;
            position: relative;
            .vux-x-icon {
                fill: #999;
                float: right;
                position: absolute;
                width: 20px;
                height: 20px;
                top: 42px;
                right: -10px;
            }
            h5,
            p {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 320px;
            }
            h5 {
                height: 24px;
                line-height: 24px;
                font-size: 14px;
                font-weight: normal;
                color: #333;
            }
            p {
                height: 20px;
                line-height: 20px;
                font-size: 14px;
                color: #999;
                span,
                em {
                    color: #999;
                }
                em {
                    float: right;
                }
            }
        }
    }
    .bscroll {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: hidden;
    }
}
</style>
<style>
.accidentCase .weui-cell:before {
    display: none;
}
</style>
